<html>
    <head>
        <title>把过渡放到组件里</title>
    </head>
    <body>
        <script>
            // 三、 把过渡放到组件里
                            /*
                                管理太多的状态过渡会很快的增加Vue实例或者组件的复杂性，型号很多的动画可以提取到专用的子组件中。
                                我们将之前的示例改写一下：

                                        <script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"><-/script>
                                        <div id="example-8">
                                            <input v-model.number="firstNumber" type="number" step="20"> +
                                            <input v-model.number="secondNumber" type="number" step="20"> =
                                            {{ result }}
                                            <p>
                                                <animated-integer v-bind:value="firstNumber"></animated-integer> +
                                                <animated-integer v-bind:value="secondNumber"></animated-integer> =
                                                <animated-integer v-bind:value="result"></animated-integer>
                                            </p>
                                        </div>
                            */
                                        // 这种负责的补间动画逻辑可以被复用
                                        // 任何证书都可以执行动画
                                        // 组件化可以使我们的界面十分清晰
                                        // 可以支持更多更复杂的动态过渡策略

                                        Vue.component('animated-integer',{
                                            template:`<span>{{ tweeningValue}}</span>`,
                                            props:{
                                                value:{
                                                    type:Number,
                                                    required:true
                                                }
                                            },
                                            data:function(){
                                                return{
                                                    tweeningValue:0
                                                }
                                            },
                                            watch:{
                                                tween:function(startValue,endValue){
                                                    var vm =this;
                                                    function animate(){
                                                        if(TWEEN.update()){
                                                            requestAnimationFrame(animate)
                                                        }
                                                    }

                                                    new TWEEN.Tween({tweeningValue:startValue})
                                                    .to({tweeningValue:endValue},500)
                                                    .onUpdate(
                                                        function(){
                                                            vm.tweeningValue= this.tweeningValue.toFixed(0)
                                                        }
                                                    )
                                                    .start()

                                                    animate();
                                                }
                                            }
                                        })

                                        // 将所有的过渡逻辑从根实例中移除，使其更加清晰：
                                        new Vue({
                                            el:'#example-8',
                                            data:{
                                                firstNumber:20,
                                                secondNumber:40
                                            },
                                            computed:{
                                                result:function(){
                                                    return this.firstNumber+this.secondNumber
                                                }
                                            }
                                        });

                    /*
                        我们能在组件中结合使用这一节讲到各种过渡策略和Vue内建的过渡系统。
                        总之，对于完成各种过渡效果几乎没有阻碍。
                    */
        </script>
    </body>
</html>